<template>
    <div class="app-container">
        <el-form :model="queryParams" size="mini" ref="queryForm" :inline="true" v-show="showSearch"
            label-width="130px">
            <el-form-item label="学号" prop="stuNo">
                <el-input v-model="queryParams.stuNo" placeholder="请输入学号" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="学生姓名" prop="stuName">
                <el-input v-model="queryParams.stuName" placeholder="请输入学生姓名" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <!-- <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                    v-hasPermi="['leave:apply:add']">新增</el-button> -->
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table :data="tableData" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="#" align="center" prop="id" />
            <el-table-column label="学号" align="center" prop="stuNo" />
            <el-table-column label="姓名" align="center" prop="stuName" />
            <el-table-column label="申请时间" align="center" prop="applyTime" width="180">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.applyTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="申请状态" align="center" prop="applyStatus">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.leave_apply_status" :value="scope.row.applyStatus" />
                </template>
            </el-table-column>
            <el-table-column label="开始时间" align="center" prop="startTime" width="180">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="结束时间" align="center" prop="endTime" width="180">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="lookVClick(scope.row)">审核</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />

        <el-dialog title="审核" :visible.sync="lookV" width="70%" :close-on-click-modal="false">
            <el-form :model="auditForm">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="辅导员意见">
                            <el-radio-group v-model="auditForm.fdyCmt">
                                <el-radio :label="'同意'">同意</el-radio>
                                <el-radio :label="'驳回'">驳回</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="">
                            <el-button size="mini" @click="doAudit">提交</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>
            <hr />
            <el-form class="lookForm" size="mini" :model="lookForm" ref="lookForm" label-width="120px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="学号" prop="stuNo">
                            <el-input v-model="lookForm.stuNo" readonly />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="姓名" prop="stuName">
                            <el-input v-model="lookForm.stuName" readonly />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="年级" prop="grade">
                            <el-input v-model="lookForm.grade" readonly />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="专业" prop="major">
                            <el-input v-model="lookForm.major" readonly />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="班级" prop="className">
                            <el-input v-model="lookForm.className" readonly />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="开始日期" prop="startTime">
                            <el-input v-model="lookForm.startTime" readonly />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="结束日期" prop="endTime">
                            <el-input v-model="lookForm.endTime" readonly />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="请假事由" prop="reason">
                            <el-input v-model="lookForm.reason" type="textarea" readonly />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="去向地" prop="toAddr">
                            <el-input v-model="lookForm.toAddr" type="textarea" readonly />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="本人承诺" prop="commit">
                            <el-input v-model="lookForm.commit" type="textarea" readonly />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="家长姓名" prop="parentName">
                            <el-input v-model="lookForm.parentName" readonly />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="本人联系电话" prop="phone">
                            <el-input v-model="lookForm.phone" readonly />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="去向地联系人" prop="toPeople">
                            <el-input v-model="lookForm.toPeople" readonly />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="去向地联系电话" prop="toPhone">
                            <el-input v-model="lookForm.toPhone" readonly />
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="家长知情同意书" prop="parentKnow">
                            <image-preview width="50px" height="50px" :src="lookForm.parentKnow" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否涉及课程" prop="toPhone">
                            <el-input v-model="lookForm.haveCourse" readonly />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div v-if="courseList.length > 0">
                <el-table :data="courseList">
                    <el-table-column label="课程名称" prop="courseName" />
                    <el-table-column label="课程课时" prop="courseNum" />
                    <el-table-column label="请假截图">
                        <template slot-scope="scope">
                            <image-preview width="50px" height="50px" :src="scope.row.coursePic" />
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-dialog>

    </div>
</template>
<script>
import { listFdy as getList, doAudit, listCourse } from "@/api/leave/leaveApply";

import { fullLoading, isEmpty } from "@/api/helpFunc/index";

export default {
    name: "leave-fdy",
    dicts: ['leave_apply_status'],
    data() {
        return {
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            total: 0,

            tableData: [],

            lookForm: {},
            lookV: false,

            auditForm: {},
            courseList: []
        }
    },
    created() {
        this.getList();
    },
    methods: {
        reset() {
            this.form = {};
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },

        async getList() {
            let loading = fullLoading(this);
            let res = await getList(this.queryParams);
            loading.close();
            if (res.code == 200) {
                this.total = res.total;
                this.tableData = [...res.rows];
            }
        },

        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        async lookVClick(row) {
            this.lookForm = {};
            this.courseList = [];
            let loading = fullLoading(this);
            let res = await listCourse(row.id);
            loading.close();
            if (res.code == 200) {
                this.courseList = [...res.data];
            }
            console.log(this.courseList);
            this.lookForm = { ...row };
            this.lookV = true;
        },

        async doAudit() {
            this.auditForm.id = this.lookForm.id;

            let sdata = { ...this.auditForm };

            if (isEmpty(sdata.fdyCmt)) {
                this.$message.info("请选择审核意见");
                return;
            }

            if (sdata.fdyCmt == "同意") {
                sdata.applyStatus = "2";
                let loading = fullLoading(this);
                let res = await doAudit(sdata);
                loading.close();
                if (res.code == 200) {
                    this.getList();
                    this.$message.success(res.msg);
                    this.lookV = false;
                }
            } else {
                sdata.applyStatus = "11"; //驳回
                this.$prompt('请输入驳回原因', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /\S/,
                    inputErrorMessage: '请填写'
                }).then(async ({ value }) => {
                    sdata.returnMsg = value;

                    let loading = fullLoading(this);
                    let res = await doAudit(sdata);
                    loading.close();
                    if (res.code == 200) {
                        this.getList();
                        this.$message.success(res.msg);
                        this.lookV = false;
                    }

                });
            }

        }
    }
}

</script>
<style scoped lang="scss">
.lookForm {
    .el-form-item {
        margin-bottom: 5px;
    }
}
</style>